<template>
    <el-drawer v-model="searchDrawer" :modal="modal" :direction="direction" :size="getSize" :showClose="showClose"
        :before-close="handleClose" :modal-class="getModalClass" class="custom-serarch-drawer">
        <template #header>
            <div class="drawer-title">{{ $t('message.placeholder.search') }}</div>
            <svg class="drawer-close" v-if="!showClose" @click="handleClose">
                <use xlink:href="#keowledge-danchuangguanbi1"></use>
            </svg>
        </template>
        <div class="search-input-box">
            <svg class="search-icon">
                <use v-bind:xlink:href="`#${searchKnow ? 'keowledge-wenku-sousuojieguo' : 'keowledge-sousuo'}`"></use>
            </svg>
            <el-input v-model="serachInput" @input="searchInputChange()"
                :placeholder="$t('message.placeholder.fileNameSearch')" @keyup.enter="addHistry()"></el-input>
            <div class="clear-box">
                <svg class="close-icon" v-if="serachInput" @click="clearSearch">
                    <use xlink:href='#keowledge-danchuangguanbi'></use>
                </svg>
            </div>
        </div>
        <div class="search-assign" v-if="inKnowledge && !highSearch">
            <div class="title">{{ $t('message.text.searchForContent') }}</div>
            <div class="assign-box">
                <div class="all" :class="[!searchKnow && 'active']" @click="changeSearchRange(false)">
                    {{ $t('message.text.allScope') }}</div>
                <div class="know" :class="[searchKnow && 'active']" @click="changeSearchRange(true)">
                    <svg class="know-file">
                        <use xlink:href="#keowledge-wenku-sousuojieguo"></use>
                    </svg>
                    <span v-tooltip-auto-show>
                        <el-tooltip :content="knowledgeInfo.name" effect="light">
                            <span>{{ knowledgeInfo.name }}</span>
                        </el-tooltip>
                    </span>
                </div>
            </div>
        </div>
        <div class="search-type-box" v-if="highSearch">
            <el-select class="proviso-item" @change="searchHandle" v-model="type"
                :placeholder="$t('message.placeholder.documentType')">
                <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-select class="proviso-item" @change="searchHandle" v-model="timeScope"
                :placeholder="$t('message.placeholder.updateTime')">
                <el-option v-for="item in timeScopeOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-select class="proviso-item" @change="searchHandle" v-model="shareRole"
                :placeholder="$t('message.placeholder.libraryLevel')">
                <el-option v-for="item in shareRoleOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-select class="proviso-item" @change="searchHandle" v-model="searchContentType"
                :placeholder="$t('message.placeholder.searchSubject')">
                <el-option v-for="item in searchContentTypeOption" :key="item.value" :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <el-select class="proviso-item" @change="searchHandle" v-model="searchType">
                <el-option v-for="item in searchTypeOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="lately-search-box" v-if="!serachInput && !highSearch" v-resize="onResize">
            <div class="lately-title">
                <div>{{ $t('message.text.recentSearch') }}</div>
                <svg class="lately-del" @click="delHistory">
                    <use xlink:href="#keowledge-qingchulishijilu"></use>
                </svg>
            </div>
            <div class="lately-body">
                <template v-if="historyList.length != 0">
                    <template v-for="(item, index) in historyList">
                        <div class="lately-item" :key="index" v-if="index < 12" @click="setSearchVal(item)"
                            v-tooltip-auto-show>
                            <!-- effect="customtip" -->
                            <el-tooltip :content="item.historyName" effect="light">
                                <span>{{ item.historyName }}</span>
                            </el-tooltip>
                        </div>
                    </template>
                </template>
                <jvs-empty imgSrc="@/assets/images/common/searchEmpty.png" v-if="historyList.length == 0" size="140px"
                    :text="$t('message.empty.null')" textMarginTop="0px"></jvs-empty>
            </div>
        </div>
        <div class="lately-priview-box" v-if="!serachInput && !highSearch" :style="{ height: getPriviewHeight }">
            <div class="lately-title">
                <div>{{ $t('message.text.recentBrows') }}</div>
            </div>
            <div class="lately-priview-lists" v-loading="latelyLoading">
                <el-scrollbar>
                    <div class="priview-item" v-for="(item, index) in priviewList" :key="index" @click="openFile(item)">
                        <svg class="icon">
                            <use v-bind:xlink:href="getIcon(item.type, item.nameSuffix)"></use>
                        </svg>
                        <div class="priview-content">
                            <div class="name">{{ item.dcName }}</div>
                            <div class="time">{{ formateTime(item.createTime) }}</div>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div>
        <div class="search-title" v-if="serachInput || highSearch">
            <div class="result">
                {{ $t('message.text.searchResult') }}
                <span class="num" v-if="highSearch">{{ searchPage.total }}</span>
                {{ highSearch ? $t('message.strip') : '' }}
            </div>
            <div class="high" @click="inToHigh" v-if="!highSearch">{{ $t('message.text.advanceSearch') }}</div>
        </div>
        <div class="knowledge-label-box" v-if="highSearch"
            :style="{ paddingBottom: (dlibrarySearch.id || checkLabelList.length > 0) ? '' : '0px' }" v-resize="onKnowLabelSize">
            <div class="dlibrary-search" v-if="dlibrarySearch.id">
                <div>{{ $t('message.text.library') }}：</div>
                <div class="dlibrary-search-item">
                    <div class="name" v-tooltip-auto-show effect="light">
                        <el-tooltip :content="dlibrarySearch.name">
                            {{ dlibrarySearch.name }}
                        </el-tooltip>
                    </div>
                    <svg class="close-icon" @click="clearDlibrary">
                        <use xlink:href="#keowledge-anniuguanbi-lanse"></use>
                    </svg>
                </div>
            </div>
            <div v-if="checkLabelList.length > 0" class="label-box" :style="{ marginLeft: dlibrarySearch.id ? '' : '0px' }">
                <div>{{ $t('message.text.label') }}：</div>
                <div class="knowledge-item" v-for="(item, index) in checkLabelList"
                    :style="{ color: item.colour, backgroundColor: taskNameColor[item.colour], borderColor: taskNameColor[item.colour] }">
                    <div class="name" v-tooltip-auto-show>
                        <el-tooltip :content="item.tagName" effect="light">
                            {{ item.tagName }}
                        </el-tooltip>
                    </div>
                    <i class="knowledge-iconfont keowledge-anniuguanbi-huangse" :style="{ color: item.colour }"
                        @click="deleteLabel(item, index)"></i>
                </div>
            </div>
        </div>
        <div class="search-list-box" v-if="serachInput || highSearch" :style="{ height: getSearchHeight }">
            <div class="search-left" :class="[highSearch && 'high-right']" v-loading="searchPageLoading">
                <el-scrollbar ref="searchListRef" v-if="searchList.length != 0">
                    <div class="search-item" v-for="(item, index) in searchList" :key="index" @click="openFile(item)">
                        <svg class="search-file-icon">
                            <use v-bind:xlink:href="getIcon(item.type, item.nameSuffix)"></use>
                        </svg>
                        <div class="search-file-body">
                            <div class="file-name" v-html="item.name"></div>
                            <div class="file-content" v-html="item.content"></div>
                            <div class="file-other-info" :class="[highSearch && 'high-info']">
                                <div class="time-auth">
                                    <div class="time">
                                        <svg class="icon">
                                            <use xlink:href="#keowledge-shijian"></use>
                                        </svg>
                                        {{ item.createTime }}
                                    </div>
                                    <div class="auth" v-tooltip-auto-show>
                                        <el-tooltip :content="item.authorName">
                                            <span>
                                                <svg class="icon">
                                                    <use xlink:href="#keowledge-chuangjianren"></use>
                                                </svg>
                                                {{ item.authorName }}
                                            </span>
                                        </el-tooltip>
                                    </div>
                                </div>
                                <div class="know" v-tooltip-auto-show>
                                    <el-tooltip :content="item.knowledgeName">
                                        <span>
                                            <svg class="icon">
                                                <use xlink:href="#keowledge-wendangweizhi"></use>
                                            </svg>
                                            {{ item.knowledgeName }}
                                        </span>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="loading-finish" v-if="(searchPage.page * searchPage.size) > searchPage.total">
                        {{ $t('message.text.showAllSearch') }}
                    </div>
                    <div v-else class="loding-more" v-loading="moreLoading" @click="loadMore">
                        {{ moreLoading ? $t('message.text.loading') : $t('message.text.loadingMore') }}
                    </div>
                </el-scrollbar>
                <jvs-empty imgSrc="@/assets/images/common/searchEmpty.png" :text="$t('message.empty.null')"
                    textMarginTop="0px" v-if="searchList.length == 0"></jvs-empty>
            </div>
            <div class="search-right" v-if="highSearch">
                <div class="knowledge-box">
                    <div class="title">
                        <svg class="icon">
                            <use xlink:href="#keowledge-wenku-sousuojieguo"></use>
                        </svg>
                        {{ $t('message.text.library') }}
                    </div>
                    <div class="lists" v-loading="knowledgePage.loading"
                        :class="[knowledgePage.total <= knowledgePage.size && 'no-lists']"
                        :style="{ height: knowledgePage.total > knowledgePage.size ? 'calc(100% - 72px)' : 'calc(100% - 32px - 5px)' }">
                        <el-scrollbar v-if="dlibraryList.length != 0">
                            <div :class="['list-item', item.id == dlibrarySearch.id && 'item-active']"
                                v-for="(item, index) in dlibraryList" :key="index" @click="setLibary(item)">
                                <div class="tag" :class="[item.shareRole]">
                                    {{ findByvalue(shareRoleOption, item.shareRole) }}</div>
                                <div class="name" v-tooltip-auto-show>
                                    <el-tooltip :content="item.name" effect="light">
                                        {{ item.name }}
                                    </el-tooltip>
                                </div>
                            </div>
                        </el-scrollbar>
                        <jvs-empty v-if="dlibraryList.length == 0" :text="$t('message.empty.empty')" size="150px"
                            textSize="14px" textClass="empty-tips"></jvs-empty>
                    </div>
                    <div class="page" v-if="knowledgePage.total > knowledgePage.size">
                        <svg class="icon" @click="cutPage('know')">
                            <use xlink:href="#keowledge-a-zu4701-copy"></use>
                        </svg>
                        <el-input-number v-model="knowledgePage.page" :min="1"
                            :max="Math.ceil(knowledgePage.total / knowledgePage.size)" controls-position="right"
                            @blur="numberBlur('know')" @keyup.enter="numberBlur('know')"></el-input-number>
                        <span class="split">/</span>
                        <span>{{ Math.ceil(knowledgePage.total / knowledgePage.size) }}</span>
                        <svg class="icon" @click="addPage('know')">
                            <use xlink:href="#keowledge-a-zu4701"></use>
                        </svg>
                    </div>
                </div>
                <div class="line"></div>
                <div class="label-box">
                    <div class="title">
                        <svg class="icon">
                            <use xlink:href="#keowledge-biaoqian-sousuojieguo1"></use>
                        </svg>
                        {{ $t('message.text.label') }}
                    </div>
                    <div class="lists" v-loading="labelPage.loading"
                        :class="[labelPage.total <= labelPage.size && 'no-lists']"
                        :style="{ height: labelPage.total > labelPage.size ? 'calc(100% - 84px)' : 'calc(100% - 32px - 5px)' }">
                        <el-scrollbar v-if="labelList.length != 0">
                            <div :class="['list-item', checkLabel(item) != -1 && 'item-active']"
                                v-for="(item, index) in labelList" :key="index" @click="setLabelList(item)">
                                <div class="badge-item-dot" :class="`badge-item-${item.colour || 'blue'}`"
                                    :style="{ background: item.colour }"></div>
                                <div class="name" v-tooltip-auto-show>
                                    <el-tooltip :content="item.tagName" effect="light">
                                        <span>{{ item.tagName }}</span>
                                    </el-tooltip>
                                </div>
                            </div>
                        </el-scrollbar>
                        <jvs-empty v-if="labelList.length == 0" :text="$t('message.empty.nullLabel')" size="150px"
                            textSize="14px" textClass="empty-tips"></jvs-empty>
                    </div>
                    <div class="page" v-if="labelPage.total > labelPage.size">
                        <svg class="icon" @click="cutPage('label')">
                            <use xlink:href="#keowledge-a-zu4701-copy"></use>
                        </svg>
                        <el-input-number v-model="labelPage.page" :min="1"
                            :max="Math.ceil(labelPage.total / labelPage.size)" controls-position="right"
                            @blur="numberBlur('label')" @keyup.enter="numberBlur('label')"></el-input-number>
                        <span class="split">/</span>
                        <span>{{ Math.ceil(labelPage.total / labelPage.size) }}</span>
                        <svg class="icon" @click="addPage('label')">
                            <use xlink:href="#keowledge-a-zu4701"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    watch,
    onMounted,
    computed,
    getCurrentInstance
} from 'vue'

import { useRouter, useRoute } from "vue-router"
import indexDB from '@/utils/indexDB.js'
import { knowledgeFrequently, getDcLibraryList } from '@/api/knowledge'
import { getTagAlls } from '@/api/tag'
import { findByvalue } from '@/utils/util.js'
import { documentSearch } from '@/api/common'
import { getStore } from '@/utils/store'
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const router = useRouter();
const route = useRoute()
const { proxy } = getCurrentInstance()
const props = defineProps({
    direction: {
        type: String,
        default: 'rtl'
    },
    remove: Function,
    hasModal: {
        type: Boolean,
        default: true
    },
    modalTrans: {
        type: Boolean,
        default: true
    },
    width: {
        type: [Number, String],
        default: '360px'
    },
    isHighSearch: {
        type: Boolean,
        default: false
    },
    showClose: {
        type: Boolean,
        default: false
    },
    inKnowledge: {
        type: Boolean,
        default: false
    },
    knowledgeInfo: {
        type: Object,
        default() {
            return {
                id: '',
                name: "",
                tenantId: ""
            }
        }
    }
})
const knowledgeDB = ref(null)
const historyList = ref([])
const priviewList = ref([])
const searchDrawer = ref(false)
const highSearch = ref(false)
const searchList = ref([])
const searchPageLoading = ref(false)
const latelyLoading = ref(false)
const moreLoading = ref(true)
const type = ref('')
const searchListRef = ref()
const searchContentType = ref('')
const searchType = ref('1')
const shareRole = ref('')
const timeScope = ref('')
const typeOption = ref([{
    label: $t('message.typeMenu.allType'),
    value: ''
}, {
    label: $t('message.typeMenu.text'),
    value: 'document_html'
}, {
    label: $t('message.typeMenu.form'),
    value: 'document_xlsx'
}, {
    label: $t('message.typeMenu.mindMap'),
    value: 'document_map'
}, {
    label: $t('message.typeMenu.process'),
    value: 'document_flow'
}, {
    label: $t('message.typeMenu.word'),
    value: 'office_doc'
}, {
    label: $t('message.typeMenu.excel'),
    value: 'office_xlsx'
}, {
    label: $t('message.typeMenu.pdf'),
    value: 'office_pdf'
}, {
    label: $t('message.typeMenu.ppt'),
    value: 'office_ppt'
}]
)
const searchContentTypeOption = ref([{
    label: $t('message.typeMenu.titleAndContent'),
    value: ""
}, {
    label: $t('message.typeMenu.title'),
    value: "1"
}, {
    label: $t('message.typeMenu.content'),
    value: "2"
}]
)
const searchTypeOption = ref([{
    label: $t('message.typeMenu.fuzzySearch'),
    value: "1"
}, {
    label: $t('message.typeMenu.accurateSearch'),
    value: "2"
}]
)
const shareRoleOption = ref([{
    label: $t('message.typeMenu.allLeves'),
    value: ""
}, {
    label: $t('message.typeMenu.wholeNetwork'),
    value: "all"
}, {
    label: $t('message.typeMenu.enterprise'),
    value: "register"
}, {
    label: $t('message.typeMenu.private'),
    value: "user"
}]
)
const timeScopeOption = ref([{
    label: $t('message.typeMenu.allTimes'),
    value: ""
}, {
    label: $t('message.typeMenu.lastHours24'),
    value: "ONE_DAY"
}, {
    label: $t('message.typeMenu.lastDay7'),
    value: "SEVEN_DAY"
}, {
    label: $t('message.typeMenu.lastDay30'),
    value: "ONE_MONTH"
}]
)
const taskNameColor = reactive({
    "#56ABFB": 'rgba(86, 171, 251, 0.2)',
    "#5DCFFF": 'rgba(93, 207, 255, 0.2)',
    "#5BE2EE": 'rgba(91, 226, 238, 0.2)',
    "#40E0C3": 'rgba(64, 224, 195, 0.2)',
    "#3DD1AE": 'rgba(61, 209, 174, 0.2)',
    "#A9E072": 'rgba(169, 224, 114, 0.2)',
    "#84E17E": 'rgba(132, 225, 126, 0.2)',
    "#73D897": 'rgba(115, 216, 151, 0.2)',
    "#F4D66D": 'rgba(244, 214, 109, 0.2)',
    "#868AF6": 'rgba(134, 138, 246, 0.2)',
    "#9A7EF4": 'rgba(154, 126, 244, 0.2)',
    "#D287F8": 'rgba(210, 135, 248, 0.2)',
    "#F693E7": 'rgba(246, 147, 231, 0.2)',
    "#FB7FB7": 'rgba(251, 127, 183, 0.2)',
    "#FB7894": 'rgba(251, 120, 148, 0.2)',
    "#FA8888": 'rgba(250, 136, 136, 0.2)',
    "#FF9F73": 'rgba(255, 159, 115, 0.2)',
    "#F6C659": 'rgba(246, 198, 89, 0.2)',
    "#D2D2D5": 'rgba(210, 210, 213, 0.2)'
})
let searchPage = reactive({
    size: 50,
    page: 1,
    total: 0
})
const labelList = ref([])
let labelPage = reactive({
    size: 20,
    backPage: 1,
    page: 1,
    total: 0,
    loading: false
})
const dlibraryList = ref([])
let knowledgePage = reactive({
    size: 20,
    page: 1,
    backPage: 1,
    total: 0,
    loading: false
})
const dlibrarySearch = ref<any>({
    id: '',
    name: "",
    tenantId: ""
})
const checkLabelList = ref([])

const modal = computed(() => {
    return props.hasModal
})
const getSize = computed(() => {
    if (!highSearch.value) {
        return props.width
    } else {
        // return '1067px'
        return '800px'
    }
})
const searchKnow = ref(false)
const lsbh = ref(0)
const knowLabel = ref(0)
const getModalClass = computed(() => {
    if (props.modalTrans) {
        return 'modal-trans'
    } else {
        ''
    }
})
const getPriviewHeight = computed(() => {
    return `calc(100% - 35px - ${props.inKnowledge ? '90px' : '0px'} - ${lsbh.value}px)`
})
const getSearchHeight = computed(() => {
    if (highSearch.value) {
        return `calc(100% - 135px - ${knowLabel.value}px)`
    } else {
        return `calc(100% - 90px - ${props.inKnowledge ? '88px' : '0px'})`
    }
})
const serachInput = ref('')
onMounted(() => {
    init()
    indexDB.openDB('knowledgeDB', 1, knowledgeDB.value, { name: 'historyList', key: 'historyListKey' }, function (db) {
        knowledgeDB.value = db
        indexDB.readAll(db, "historyList").then(res => {
            historyList.value = res.reverse()
        })
    });
    highSearch.value = props.isHighSearch
    searchKnow.value = props.inKnowledge
    if (props.inKnowledge) {
        dlibrarySearch.value = props.knowledgeInfo
    }
})
function init() {
    searchDrawer.value = true
    latelyLoading.value = true
    knowledgeFrequently({
        operationType: '查看'
    }).then((res: any) => {
        if (res.data.code == 0) {
            priviewList.value = res.data.data
            latelyLoading.value = false
        }
    }).catch((err: any) => { })
}
function changeSearchRange(val) {
    searchKnow.value = val
    if (val) {
        dlibrarySearch.value = props.knowledgeInfo
    } else {
        dlibrarySearch.value = {}
    }
    if (serachInput.value) {
        getSearch()
    }
}
function handleClose() {
    searchPage = {
        page: 1,
        size: 50,
        total: 0
    }
    labelPage = {
        size: 20,
        backPage: 1,
        page: 1,
        total: 0,
        loading: false
    }
    knowledgePage = {
        size: 20,
        page: 1,
        backPage: 1,
        total: 0,
        loading: false
    }
    serachInput.value = ''
    highSearch.value = false
    searchDrawer.value = false
    if (props.remove) props.remove()
}
function onResize(dom) {
    lsbh.value = dom.height
}
function onKnowLabelSize(dom) {
    knowLabel.value = dom.height
}
function formateTime(val) {
    return proxy.$dayjsCalendar(val, {
        sameElse: 'YYYY.MM.DD HH:mm'
    })
}
function delHistory() {
    proxy.$confirm($t('message.confirm.clearHistory'), $t('message.clear'), {
        confirmButtonText: $t('message.buttons.submit'),
        cancelButtonText: $t('message.buttons.cancal'),
        type: 'warning'
    }).then(() => {
        indexDB.clearData(knowledgeDB.value, "historyList", function () {
            historyList.value = []
        })
    })
}
function openFile(item) {
    router.push({
        path: `/knowledge/all/${item.knowledgeId}`,
        query: {
            docId: item.dcLibraryId || item.docId
        }
    })
    handleClose()
}
function setSearchVal(item) {
    serachInput.value = item.historyName
    searchInputChange()
}
interface historyList {
    historyName: String,
    historyListKey: String | Number
}
function addHistry(isChangeVal = true) {
    let isRe = true
    historyList.value.forEach((item: historyList) => {
        if (serachInput.value == item.historyName) {
            isRe = false
        }
    })
    if (isRe && serachInput.value) {
        indexDB.addData(
            knowledgeDB.value,
            "historyList",
            {
                historyListKey: new Date().getTime(),
                historyName: serachInput.value
            },
            function () {
                // that.goSearch({
                //     historyName:that.searchVal
                // })
                indexDB.readAll(knowledgeDB.value, "historyList").then(res => {
                    historyList.value = res.reverse()
                    if (isChangeVal) {
                        searchInputChange()
                    }
                })
            }
        );
    } else {
        if (isChangeVal) {
            searchInputChange()
        }
    }
    //   this.inputFoucs = false
}

function searchInputChange() {
    searchPage = {
        page: 1,
        size: 50,
        total: 0
    }
    proxy.$lodash.debounce(() => {
        if (serachInput.value) {
            searchPageLoading.value = true
            getSearch()
        } else {
            searchList.value = []
        }
    }, 100)()
}
function clearSearch() {
    searchPage = {
        page: 1,
        size: 50,
        total: 0
    }
    serachInput.value = ''
    searchList.value = []
}
function getSearch(isPush = false) {
    interface obj {
        dcId?: any,
        knowledgeId?: any,
        sameTenant?: any,
        timeScope?: String,
        searchType?: String,
        searchContentType?: String,
        type?: String,
        shareRole?: String
    }
    let obj: obj = {
        dcId: null,
        knowledgeId: null,
        sameTenant: null,
    }
    if (highSearch.value) {
        obj = {
            dcId: null,
            knowledgeId: null,
            sameTenant: null,
            timeScope: timeScope.value,
            searchType: searchType.value,
            searchContentType: searchContentType.value,
            type: type.value,
            shareRole: shareRole.value,
        }
    }
    if (dlibrarySearch.value.id) {
        obj.dcId = dlibrarySearch.value.id
        obj.knowledgeId = dlibrarySearch.value.id
        if (dlibrarySearch.value.tenantId == getStore({ name: 'tenantId' })) {
            obj.sameTenant = true
        } else {
            obj.sameTenant = false
        }
    }
    let tagName = ''
    checkLabelList.value.forEach((item) => {
        tagName += item.tagName + ' '
    })
    documentSearch({
        keyword: serachInput.value,
        size: searchPage.size,
        current: searchPage.page,
        search: false,
        isNotNull: false,
        tagName: tagName,
        ...obj
    }).then(res => {
        if (res.data.code == 0) {
            if (isPush) {
                searchList.value.push(...res.data.data.records)
            } else {
                searchList.value = res.data.data.records
            }
            searchPage.total = res.data.data.total
            moreLoading.value = false
            searchPageLoading.value = false
            searchListRef.value.scrollTo(0, 0, 0)
        }
    }).catch(err => {
        moreLoading.value = false
        searchPageLoading.value = false
    })
}
function loadMore() {
    searchPage.page += 1
    moreLoading.value = true
    getSearch(true)
}
function searchHandle() {
    searchPage.page = 1
    indexDB.readAll(knowledgeDB.value, "historyList").then(res => {
        historyList.value = res.reverse()
    })
    searchPageLoading.value = true
    getSearch()
}
function inToHigh() {
    if (!searchKnow) {
        dlibrarySearch.value = {
            id: '',
            name: "",
            tenantId: ""
        }
    }
    highSearch.value = true
    knowledgePage.loading = true
    labelPage.loading = true
    getKnowledgeAll()
    getLabelAll()
    addHistry(false)
}
function getKnowledgeAll() {
    getDcLibraryList({
        size: knowledgePage.size,
        current: knowledgePage.page
    }).then(res => {
        if (res.data.code == 0) {
            knowledgePage.loading = false
            knowledgePage.total = res.data.data.total
            dlibraryList.value = res.data.data.records
        }
    })
}
function getLabelAll() {
    getTagAlls({
        size: labelPage.size,
        current: labelPage.page,
    }).then(res => {
        if (res.data.code == 0) {
            labelPage.loading = false
            labelPage.total = res.data.data.total
            labelList.value = res.data.data.records
        }
    })
}
function numberBlur(type: string) {
    if (type == 'label') {
        if (labelPage.page && labelPage.page != labelPage.backPage) {
            labelPage.loading = true
            getLabelAll()
        }
        if (!labelPage.page) {
            labelPage.page = labelPage.backPage
        } else {
            labelPage.backPage = labelPage.page
        }
    } else {
        if (knowledgePage.page && knowledgePage.page != knowledgePage.backPage) {
            knowledgePage.loading = true
            getKnowledgeAll()
        }
        if (!knowledgePage.page) {
            knowledgePage.page = knowledgePage.backPage
        } else {
            knowledgePage.backPage = knowledgePage.page
        }
    }
}
function cutPage(type: String) {
    if (type == 'know') {
        knowledgePage.page -= 1
        if (knowledgePage.page < 1) {
            knowledgePage.page = 1
        }
        knowledgePage.loading = true
        getKnowledgeAll()
    } else {
        labelPage.page -= 1
        if (labelPage.page < 1) {
            labelPage.page = 1
        }
        labelPage.loading = true
        getLabelAll()
    }
}
function addPage(type: String) {
    if (type == 'know') {
        knowledgePage.page += 1
        if (knowledgePage.page > Math.ceil(knowledgePage.total / knowledgePage.size)) {
            knowledgePage.page = Math.ceil(knowledgePage.total / knowledgePage.size)
        }
        knowledgePage.loading = true
        getKnowledgeAll()
    } else {
        labelPage.page += 1
        if (labelPage.page > Math.ceil(labelPage.total / labelPage.size)) {
            labelPage.page = Math.ceil(labelPage.total / labelPage.size)
        }
        labelPage.loading = true
        getLabelAll()
    }
}
interface labelObj {
    id: String
}
function setLabelList(item: labelObj) {
    let i = checkLabel(item)
    if (i == -1) {
        checkLabelList.value.push(item)
    } else {
        checkLabelList.value.splice(i, 1)
    }
    searchPage.page = 1
    searchPageLoading.value = true
    getSearch()
}
function checkLabel(item: labelObj) {
    let flag = -1
    checkLabelList.value.forEach((i: labelObj, index) => {
        if (item.id == i.id) {
            flag = index
        }
    })
    return flag
}
function setLibary(item) {
    searchPageLoading.value = true
    dlibrarySearch.value = item
    searchPage.page = 1
    getSearch()
}
function clearDlibrary() {
    searchPageLoading.value = true
    dlibrarySearch.value = {
        id: '',
        name: '',
        tenantId: ""
    }
    searchPage.page = 1
    getSearch()
}
function deleteLabel(item, index) {
    searchPageLoading.value = true
    checkLabelList.value.splice(index, 1)
    searchPage.page = 1
    getSearch()
}
</script>
<style lang="scss">
.modal-trans {
    background-color: transparent !important;
}

.custom-serarch-drawer {
    .el-drawer__header {
        padding: 24px 24px 0px;
        margin-bottom: 16px;

        .drawer-title {
            font-size: 20px;
            color: #363b4c;
            @include SourceHanSansCN-Bold;
        }

        .drawer-close {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
    }

    .el-drawer__body {
        padding: 0px;
    }

    .search-input-box {
        display: flex;
        align-items: center;
        margin: 0px 24px;
        height: 32px;
        border-bottom: 1px solid #EEEFF0;

        .search-icon {
            width: 16px;
            height: 16px;
        }

        .el-input__wrapper {
            box-shadow: none !important;
            background-color: transparent !important;
        }

        .clear-box {
            width: 16px;
            height: 16px;

            .close-icon {
                width: 16px;
                height: 16px;
                min-width: 16px;
                cursor: pointer;
            }
        }
    }

    .search-assign {
        padding: 24px 24px 0px;
        box-sizing: border-box;

        .title {
            @include SourceHanSansCN-Bold;
            font-size: 14px;
            color: #363B4C;
        }

        .assign-box {
            display: flex;
            align-items: center;
            margin-top: 16px;
            font-size: 14px;
            color: #363b4c;
            @include SourceHanSansCN-Regular;

            .all {
                background: #F2F3F5;
                border-radius: 4px 4px 4px 4px;
                height: 28px;
                display: flex;
                padding: 0px 5px;
                line-height: 28px;
                cursor: pointer;

                &:hover {
                    background: #EEEFF0;
                }
            }

            .know {
                cursor: pointer;
                margin-left: 16px;
                display: flex;
                align-items: center;
                background: #F2F3F5;
                border-radius: 4px 4px 4px 4px;
                height: 28px;
                line-height: 28px;
                padding: 0px 5px;

                span {
                    max-width: 160px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: pre;
                }

                .know-file {
                    width: 16px;
                    height: 16px;
                    min-width: 16px;
                    margin-right: 8px;
                }

                &:hover {
                    background: #EEEFF0;
                }
            }
        }

        .active {
            background: #DDEAFF !important;
            color: #1E6FFF;
        }
    }

    .search-type-box {
        padding: 16px 24px 0px;
        box-sizing: border-box;
        display: flex;
        grid-column-gap: 16px;

        .proviso-item {
            width: 96px;
            height: 32px;

            .el-input__wrapper {
                height: 32px !important;
                padding: 0px 5px !important;
                background: #F5F6F7 !important;
                box-shadow: none !important;
                border-color: #F5F6F7 !important;

                input {
                    color: #6F7588;
                    text-align: center;
                }

                .el-select__icon {
                    margin-left: 0px;
                }
            }

            .is-focus {
                .el-input__wrapper {
                    background: #F5F6F7 !important;
                    box-shadow: none !important;
                    border-color: #F5F6F7 !important;

                    input {
                        color: #1E6FFF;
                        text-align: center;
                    }
                }
            }

            &:hover {
                .el-input__wrapper {
                    background: #EEEFF0 !important;
                    box-shadow: none !important;
                    border-color: #F5F6F7 !important;
                }
            }

            border-radius: 4px;
        }
    }

    .lately-search-box {
        padding: 24px 24px;

        .lately-body {
            padding-top: 16px;
            display: flex;
            flex-wrap: wrap;
            grid-row-gap: 16px;
            grid-column-gap: 16px;

            .lately-item {
                height: 28px;
                line-height: 28px;
                background: #F5F6F7;
                border-radius: 4px;
                color: #363B4C;
                font-size: 14px;
                @include SourceHanSansCN-Regular;
                min-width: 80px;
                max-width: 155px;
                overflow: hidden;
                display: inline-block;
                text-overflow: ellipsis;
                white-space: pre;
                text-align: center;
                cursor: pointer;
                padding: 0px 8px;
                box-sizing: border-box;

                &:hover {
                    background: #EEEFF0;
                }
            }
        }
    }

    .lately-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: #363B4C;
        @include SourceHanSansCN-Bold;

        .lately-del {
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
    }

    .lately-priview-box {
        .lately-title {
            padding: 0px 24px;
            margin-bottom: 4px;
        }

        .lately-priview-lists {
            height: calc(100% - 24px);

            .priview-item {
                padding: 0px 24px;
                cursor: pointer;
                height: 36px;
                display: flex;
                align-items: center;

                &:hover {
                    background-color: #f5f6f7;
                }

                .icon {
                    width: 24px;
                    min-width: 24px;
                    height: 24px;
                }

                .priview-content {
                    display: flex;
                    align-items: center;
                    margin-left: 12px;
                    justify-content: space-between;
                    width: calc(100% - 32px);

                    .name {
                        overflow: hidden;
                        display: inline-block;
                        text-overflow: ellipsis;
                        white-space: pre;
                        width: 185px;
                    }

                    .time {
                        color: #6F7588;
                        font-size: 12px;
                        min-width: 80px;
                        max-width: 110px;
                        text-align: right;
                    }
                }
            }
        }
    }

    .search-title {
        font-size: 14px;
        padding: 16px 24px;
        box-sizing: border-box;
        @include SourceHanSansCN-Regular;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .result {
            color: #363B4C;

            .num {
                color: #1E6FFF;
                @include SourceHanSansCN-Bold;
            }
        }

        .high {
            color: #1E6FFF;
            cursor: pointer;
        }
    }

    .knowledge-label-box {
        display: flex;
        align-items: center;
        padding: 0px 24px 16px;
        box-sizing: border-box;
        font-size: 14px;
        color: #6F7588;

        .dlibrary-search {
            display: flex;
            align-items: center;

            .dlibrary-search-item {
                height: 24px;
                line-height: 24px;
                background: #F2F7FF;
                border-radius: 2px 2px 2px 2px;
                display: flex;
                align-items: center;
                max-width: 120px;
                padding: 0px 4px;
                box-sizing: border-box;
                font-size: 12px;
                color: #1E6FFF;
                @include SourceHanSansCN-Regular;

                .name {
                    max-width: 110px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .close-icon {
                    width: 12px;
                    height: 12px;
                    min-width: 12px;
                    cursor: pointer;
                    margin-left: 4px;
                }
            }
        }

        .label-box {
            margin-left: 16px;
            display: flex;
            align-items: center;

            .knowledge-item {
                height: 24px;
                line-height: 24px;
                border-radius: 3px;
                max-width: 120px;
                padding: 0px 4px;
                box-sizing: border-box;
                font-size: 12px;
                display: flex;
                align-items: center;

                .name {
                    max-width: 60px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                i {
                    font-size: 12px;
                    cursor: pointer;
                    margin-left: 8px;
                }
            }

            .knowledge-item+.knowledge-item {
                margin-left: 12px;
            }
        }
    }

    .search-list-box {
        display: flex;

        .search-left {
            height: 100%;
            width: 100%;
            position: relative;

            .search-item {
                padding: 8px 24px;
                margin-bottom: 8px;
                display: flex;
                cursor: pointer;

                &:hover {
                    background: #f5f6f7;
                }

                .search-file-icon {
                    width: 24px;
                    height: 24px;
                    min-width: 24px;
                    margin-top: 16px;
                }

                .search-file-body {
                    margin-left: 16px;
                    width: 100%;

                    .file-name {
                        cursor: default;
                        font-size: 14px;
                        @include SourceHanSansCN-Bold;
                        color: #363B4c;
                        margin-bottom: 4px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        line-clamp: 1;
                        -webkit-box-orient: vertical;
                        word-break: break-all;

                        em {
                            @include SourceHanSansCN-Bold;
                            color: #1E6FFF !important;
                            font-style: normal !important;
                        }
                    }

                    .file-content {
                        font-size: 12px;
                        margin-bottom: 4px;
                        color: #575E73;
                        @include SourceHanSansCN-Regular;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                        word-break: break-all;

                        em {
                            color: #1E6FFF !important;
                            font-style: normal !important;
                        }
                    }

                    .file-other-info {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 12px;
                        color: #6F7588;

                        .time-auth {
                            display: flex;
                            align-items: center;
                        }

                        .icon {
                            width: 12.75px;
                            min-width: 12.75px;
                            height: 12.75px;
                            margin-right: 2px;
                        }

                        .auth {
                            margin-left: 14px;
                            width: 65px;
                            overflow: hidden;
                            display: inline-block;
                            text-overflow: ellipsis;
                            white-space: pre;

                            ::v-deep(span) {
                                display: flex;
                                align-items: center;
                            }
                        }

                        .time {
                            width: 130px;
                            display: flex;
                            align-items: center;
                        }

                        .know {
                            margin-left: 4px;
                            width: 65px;
                            text-align: right;
                            overflow: hidden;
                            display: inline-block;
                            text-overflow: ellipsis;
                            white-space: pre;

                            ::v-deep(span) {
                                display: flex;
                                align-items: center;
                                justify-content: end;
                            }
                        }
                    }

                    .high-info {

                        .auth,
                        .know {
                            width: 150px;
                        }
                    }
                }
            }

            .search-item+.search-item {
                margin-top: 8px;
            }

            .loding-more,
            .loading-finish {
                margin: 0 24px;
                padding: 16px 0px;
                color: #575E73;
                text-align: center;
                border-top: 1px solid #EEEFF0;
                font-size: 14px;
                @include SourceHanSansCN-Regular;
                position: relative;
            }

            .loding-more {
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
            }
        }

        .high-right {
            width: calc(100% - 222px);
        }

        .search-right {
            width: 222px;
            padding: 0px 24px;
            box-sizing: border-box;
            border-left: 1px solid #EEEFF0;

            .knowledge-box,
            .label-box {
                height: calc((100% - 33px) / 2);

                .title {
                    font-size: 14px;
                    color: #363b4c;
                    display: flex;
                    @include SourceHanSansCN-Bold;
                    align-items: center;
                    margin-bottom: 16px;

                    .icon {
                        width: 16px;
                        height: 16px;
                        margin-right: 8px;
                    }
                }

                .page {
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    font-size: 14px;
                    @include SourceHanSansCN-Regular;
                    color: #575e73;
                    height: 20px;

                    .icon {
                        width: 18px;
                        min-width: 18px;
                        height: 18px;
                        cursor: pointer;
                    }

                    .el-input-number {
                        width: 32px;
                        height: 20px;

                        .el-input-number__decrease,
                        .el-input-number__increase {
                            display: none;
                        }

                        .el-input__wrapper {
                            background-color: #F5F6F7 !important;
                            box-shadow: none !important;
                            padding: 0px 4px !important;
                            box-sizing: border-box !important;
                        }
                    }

                    .split {
                        padding: 0px 8px 3px;
                    }
                }

                .lists {
                    margin: 0px 0px 16px;

                    .empty-tips {
                        color: #6F7588;
                    }

                    .list-item {
                        display: flex;
                        align-items: center;
                        height: 24px;
                        font-size: 12px;
                        color: #363b4c;
                        @include SourceHanSansCN-Regular;
                        cursor: pointer;

                        &:hover {
                            background-color: #F5F6F7;
                        }
                    }

                    .list-item+.list-item {
                        margin-top: 8px;
                    }

                    .item-active {
                        background-color: #E4EDFF !important;
                    }
                }

                .no-lists {
                    margin-bottom: 0px;
                }
            }

            .knowledge-box {
                .lists {
                    .list-item {
                        padding: 0px 3px;

                        .tag {
                            padding: 2px 4px;
                            box-sizing: border-box;
                            border-radius: 5px 0px 5px 0px;
                            display: flex;
                            align-items: center;
                            font-size: 10px;
                            height: 16px;
                            line-height: 16px;
                        }

                        .user {
                            background: #FFE7ED;
                            color: #FF194C;
                        }

                        .all {
                            background: #E8F0FF;
                            color: #1E6FFF;
                        }

                        .register {
                            background: #E9F7EC;
                            color: #36B452;
                        }

                        .name {
                            margin-left: 8px;
                            width: 130px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        &:hover {
                            .tag {
                                background-color: transparent;
                            }
                        }
                    }
                }
            }

            .line {
                height: 1px;
                background: #EEEFF0;
                margin: 16px 0px;
            }

            .label-box {
                .lists {
                    .list-item {
                        .badge-item-dot {
                            width: 8px;
                            height: 8px;
                            min-width: 8px;
                            border-radius: 2px;
                            margin-left: 2px;
                            margin-right: 8px;
                        }

                        .name {
                            width: 155px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .tag {
                            color: #73b4fb;
                            background-color: rgba(244, 247, 249, 100);
                            font-size: 12px;
                            border-radius: 2px;
                            padding: 0px 3px;
                            margin-right: 9px;
                            margin-left: 3px;
                        }
                    }
                }
            }
        }
    }
}
</style>